<?php

$whatever = null;

?>
<!DOCTYPE HTML>
<head>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $('#login-link').click(function() {
        $('#login').slideToggle('slow');
    });
    
});

</script>
</head>
<body style="background-color: #333">
    <a id="login-link">login here</a>

<div id="hash">
    <h3 style="margin: 0; padding: 0;">Enter your hash</h1>
    <div class="transparent">
        <input class="text" type="text" size="20"></input>
    </div>
    <div class="transparent" style="margin-top: 8px; width: 220px;">
        Use the input above to pick up a file if you have a hashcode.
    </div>
</div>
<div id="login">
    <h3 style="margin: 0; padding: 0;">Login</h1>
    <div class="transparent">
        user:<input class="text" type="text" size="20"></input>
        pass:<input class="text" type="text" size="20"></input>
    </div>
</div>
</body>
</html>

<style>
* {
    font-family: 'Play', arial, serif;
}

a {
    text-decoration: none;
    color: white;
}

.transparent {
    padding: 14px;
    background-color: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#000000', EndColorStr='#000000');
    background: rgb(0, 0, 0) transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#000000)";
}

#hash {
    color: white;
    position: absolute;
    left: 40%;
    bottom: 40%;
}

#login {
    color: white;
    position: absolute;
    left: 10%;
    bottom: 0;
    display: none;
}

input.text {
    font-size: 16px;
    color: #D4D4D4;
    border: 2px solid #444444;
    background: none repeat scroll 0 0 #343434;
}

input.text:focus {
    border: 2px solid lightblue;
    background: none repeat scroll 0 0 #343434;
}
</style>
